<template>
    <div>
        <Card>
            <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
                    @on-delete="handleDelete"/>
            <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
        </Card>
    </div>
</template>

<script>
    import Tables from '_c/tables'
    import {getTableData} from '@/api/data'

    export default {
        name: 'tables_page',
        components: {
            Tables
        },
        data() {
            return {
                columns: [
                    {title: 'Name', key: 'name', sortable: true},
                    {title: 'Email', key: 'email', editable: true},
                    {title: 'Create-Time', key: 'createTime'},
                    {
                        title: 'Handle',
                        key: 'handle',
                        options: ['delete'],
                        button: [
                            (h, params, vm) => {
                                return h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '你确定要删除吗?'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            vm.$emit('on-delete', params)
                                            vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                                        }
                                    }
                                }, [
                                    h('Button', '自定义删除')
                                ])
                            }
                        ]
                    }
                ],
                tableData: []
            }
        },
        methods: {
            handleDelete(params) {
                console.log(params)
            },
            exportExcel() {
                this.$refs.tables.exportCsv({
                    filename: `table-${(new Date()).valueOf()}.csv`
                })
            }
        },
        mounted() {
            this.$axios.request({
                url: 'get_table_data',
                method: 'get'
            }).then(res => {
                this.tableData = res.data
            })
        }
    }
</script>

<style>

</style>
